<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>添加商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品专区：</label>
			<div class="layui-input-inline">
				<select name="zoneId" id="zoneId"  lay-verify="required" lay-filter="zoneId" class="select" lay-verify="type">
					<option value="11">零售专区</option>
					<option value="12">体验专区</option>
					<option value="13">兑换专区</option>
					<option value="14">活动专区</option>
					<option value="15">新品专区</option>
					<option value="16">精品专区</option>
					<option value="17">开店商品专区</option>
					<option value="18">开店保证金专区</option>
                </select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品分类：</label>
			<div class="layui-input-inline" style="width:90px;">
				<select name="cfId1" id="cfId1" lay-filter="cfId1" class="select" lay-verify="type">
				</select>
			</div>
			<div class="layui-input-inline" style="width:90px;">
				<select name="cfId2" id="cfId2" lay-filter="cfId2" class="select" lay-verify="type">
				</select>
			</div>
			<div class="layui-input-inline" style="width:90px;">
				<select name="cfId3" id="cfId3" lay-filter="cfId3" class="select" lay-verify="type">
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品系列：</label>
			<div class="layui-input-inline" style="width:90px;">
				<select name="seriesId" id="seriesId" lay-filter="seriesId" class="select" lay-verify="type">
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品编号：</label>
			<div class="layui-input-inline">
				<input type="text" name="code" id="code" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品标题：</label>
			<div class="layui-input-inline" style="width:504px;">
				<input type="text" name="title" id="title" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品名称：</label>
			<div class="layui-input-inline">
				<input type="text" name="name" id="name" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品简称：</label>
			<div class="layui-input-inline">
				<input type="text" name="nameSort" id="nameSort" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品描述：</label>
			<div class="layui-input-inline" style="width:1132px;">
				<input type="text" name="nameDesc" id="nameDesc" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">库 存 数：</label>
			<div class="layui-input-inline">
				<input type="text" name="inventory" id="inventory" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">报 警 数：</label>
			<div class="layui-input-inline">
				<input type="text" name="alarm" id="alarm" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">供 货 商：</label>
			<div class="layui-input-inline" id="supplier"></div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">联合运营：</label>
			<div class="layui-input-inline" style="width:190px;">
				<select name="scope" id="scope"  lay-verify="required" lay-filter="select1">
					<option selected="selected" value="0">全网销售</option>
					<option value="1">自有市场销售</option>
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品主图：</label>
			<div class="layui-input-inline" style="width:504px;">
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="btnPic">上传主图</button>
					<input type="hidden" class="proImg" id="pic" name="pic" value=""/>
					<div class="layui-upload-list  one-img">
						<img class="layui-upload-img" id="demoPic" width="100px" height="100px">
						<p id="demoTextPic"></p>
					</div>
				</div>

			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">首页图片：</label>
			<div class="layui-input-inline" style="width:504px;">
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="btnIPic">上传主图</button>
					<input type="hidden" class="proImg" id="ipic" name="ipic" value=""/>
					<div class="layui-upload-list  one-img">
						<img class="layui-upload-img" id="demoIPic" width="100px" height="100px">
						<p id="demoTextIPic"></p>
					</div>
				</div>

			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品组图：</label>
			<div class="layui-input-inline" style="width:504px;">
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="btnPicList">上传组图</button>
					<input type="hidden" class="proImg" id="picList" name="picList" value=""/>
					<div class="layui-upload-list  one-img">
						<p id="demoPicList"></p>
					</div>
				</div>

			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">商品详情：</label>
			<div class="layui-input-inline" style="width:504px;">
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="btnPicdetails">上传详情</button>
					<input type="hidden" class="proImg" id="picdetails" name="picdetails" value=""/>
					<div class="layui-upload-list  one-img">
						<p id="demoPicdetails"></p>
					</div>
				</div>

			</div>
		</div>
		<div class="layui-form-item layui-hide">
			<input type="text" id="id" value="0">
			<input type="text" id="cfname" value="">
			<input type="text" id="zonename" value="">
			<input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-back-submit" value="确认">
		</div>
  </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/layui/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script>
	var form1;

	function loadlayui() {
        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form'], function () {
            var $ = layui.$
                , form = layui.form;

            form1 = form;

            loadfy(2, 1);
            loadfy(cfId1,2);
            loadfy(cfId2,3);

            $("#cfId1").val(cfId1);
            $("#cfId2").val(cfId2);
            $("#cfId3").val(cfId3);

            form.on('switch(stateS)', function (data) {
                //开关是否开启，true或者false
                var checked = data.elem.checked;
                if (checked) {
                    $("#state").val(1);
                }
                else {
                    $("#state").val(0);
                }
            });

            form.on('select(cfId1)', function (data) {
                var option2 = $("<option>").val(0).text("选择分类");
                $("#cfId3").html(option2);
                loadfy(data.value, 2);
            });

            form.on('select(cfId2)', function (data) {
                loadfy(data.value, 3);
            });

            form.on('select(cfId3)', function (data) {
                $("#cfname").val(data.elem[data.elem.selectedIndex].text);
                var zoneId = $("#zoneId").val();
                var top = "";
                switch (zoneId) {
                    case "11":
                        top = "L";
                        break;
                    case "12":
                        top = "T";
                        break;
                    case "13":
                        top = "D";
                        break;
                    case "14":
                        top = "H";
                        break;
                    default :
                        break;
                }
                if ($("#code").val() == "") {
                    $("#code").val(top + $("#cfId3").val());
                }
                from.render('select');
            });

            form.on('select(zoneId)', function (data) {
                $("#zonename").val(data.elem[data.elem.selectedIndex].text);
                from.render('select');
            });




            form.render();
        });

    }

    var picListArray = new Array();
    var picListArray1 = new Array();

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //代表图上传
        var uploadInst = upload.render({
            elem: '#btnPic'
            ,url: '/UploadFile'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                // obj.preview(function(index, file, result){
                //     $('#demoPic').attr('src', result); //图片链接（base64）
                // });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.code == 0){
                    $("#pic").val(res.fileName);
                    $('#demoPic').attr('src', res.fileName);
                    return layer.msg('上传成功');
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoTextPic = $('#demoTextPic');
                demoTextPic.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoTextPic.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //首页图上传
        var uploadInst = upload.render({
            elem: '#btnIPic'
            ,url: '/UploadFile'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                // obj.preview(function(index, file, result){
                //     $('#demoIPic').attr('src', result); //图片链接（base64）
                // });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.code == 0){
                    $("#ipic").val(res.fileName);
                    $('#demoIPic').attr('src', res.fileName);
                    return layer.msg('上传成功');
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoTextPic = $('#demoTextIPic');
                demoTextPic.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoTextPic.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //图片组上传
        upload.render({
            elem: '#btnPicList'
            ,url: '/UploadFile'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                // obj.preview(function(index, file, result){
                //     $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                // });
            }
            ,done: function(res){
                //alert(res.fileName);
                //上传完毕
                picListArray.push(res.fileName);
                picListLoad();
            }
        });

        //商品详情上传
        upload.render({
            elem: '#btnPicdetails'
            ,url: '/UploadFile'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                // obj.preview(function(index, file, result){
                //     $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                // });
            }
            ,done: function(res){
                //alert(res.fileName);
                //上传完毕
                picListArray1.push(res.fileName);
                picListLoad1();
            }
        });

    });

    function picListLoad()
    {
        $("#picList").val("");
        $('#demoPicList').html("");
        var i=0;
        for (i=0;i<picListArray.length;i++)
        {
            if(i==0)
            {
                $("#picList").val(picListArray[0]);
            }
            else
            {
                $("#picList").val($("#picList").val()+","+picListArray[i]);
            }
            $('#demoPicList').append('<img src="'+ picListArray[i] +'" alt="'+ picListArray[i] +'" width="100" height="100" class="layui-upload-img"><a class="layui-btn layui-btn-xs demo-reload'+i+'" data="'+i +'">删除</a>')
            $('#demoPicList').find('.demo-reload'+i).on('click', function(){
                var pivpath =$(this).attr("data");
                picListArray.splice(pivpath,1);
                picListLoad();
            });
        }

    }



    function picListLoad1()
    {
        $("#picdetails").val("");
        $('#demoPicdetails').html("");
        var i=0;
        for (i=0;i<picListArray1.length;i++)
        {
            if(i==0)
            {
                $("#picdetails").val(picListArray1[0]);
            }
            else
            {
                $("#picdetails").val($("#picdetails").val()+","+picListArray1[i]);
            }
            $('#demoPicdetails').append('<img src="'+ picListArray1[i] +'" alt="'+ picListArray1[i] +'" width="100" height="100" class="layui-upload-img"><a class="layui-btn layui-btn-xs demo-reloadX'+i+'" data="'+i +'">删除</a>')
            $('#demoPicdetails').find('.demo-reloadX'+i).on('click', function(){
                var pivpath =$(this).attr("data");
                picListArray1.splice(pivpath,1);
                picListLoad1();
            });
        }

    }


    $(function(){
        loadSeries();
        loadSelf();
        loadlayui();
    });

    function loadSeries() {
        $.ajax({
            type: "POST",
            url: "/goodsjson",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(GetJsonDataS1(3)),
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.code == "000000") {
                    var option1 = $("<option>").val(0).text("选择商品系列");
                    $("#seriesId").html(option1);
                    $.each(data.data, function (i, item) {
                        var option1 = $("<option>").val(item.id).text(item.name);
                        $("#seriesId").append(option1);
                    });

                    form1.render('select');
                }
                else {
                    alert(data.errorDetail);
                }
            },
            error: function (message) {
                alert("提交数据失败！"+message);
            }
        });
    }

	function loadfy(pid,m) {
        $.ajax({
            type: "POST",
            url: "/goodsjson",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(GetJsonDataS1(pid)),
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.code == "000000") {
                    var option1 = $("<option>").val(0).text("选择分类");
                    $("#cfId"+m).html(option1);
                    $.each(data.data, function (i, item) {
                        var option1 = $("<option>").val(item.id).text(item.name);
                        $("#cfId"+m).append(option1);
                    });

                    form1.render('select');
                }
                else {
                    alert(data.errorDetail);
                }
            },
            error: function (message) {
                alert("提交数据失败！"+message);
            }
        });
    }

    function GetJsonDataS1(pid) {
        var json = {
            "url": "Classification/List",
            "parm":{"pid":pid,"state":1}
        };
        return json;
    }

    var cfId1=0;
    var cfId2=0;
    var cfId3=0;
    var state=1;
    function loadSelf() {
        var id = $.getUrlParam("id");
        if(id==null)
        {
            alert("参数错误!!");
        }
        else {
            $("#id").val(id);
            $.ajax({
                type: "POST",
                url: "/goodsjson",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(GetJsonDataS2(id)),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data.code == "000000") {
                        $("#title").val(data.data.title);
                        $("#name").val(data.data.name);
                        $("#nameSort").val(data.data.nameSort);
                        $("#code").val(data.data.code);
                        $("#nameDesc").val(data.data.nameDesc);
                        $("#supplier").html(data.data.supplier);

                        $("#zoneId").val(data.data.zoneId);
                        $("#zonename").val(data.data.zonename);

                        $("#seriesId").val(data.data.seriesId);

                        $("#pic").val(data.data.pic);
                        $("#demoPic").attr("src",data.data.pic);
                        $("#ipic").val(data.data.ipic);
                        $("#demoIPic").attr("src",data.data.ipic);

                        if(data.data.piclist!="") {
                            picListArray = data.data.piclist.split(',');
                            picListLoad();
                        }

                        if(data.data.picdetails!="") {
                            picListArray1 = data.data.picdetails.split(',');
                            picListLoad1();
                        }

                        cfId1=data.data.cfId1;
                        cfId2=data.data.cfId2;
                        cfId3=data.data.cfId3;

                        $("#cfname").val(data.data.cfname);
                        $("#seriesId").val(data.data.seriesId);

                        state = data.data.state;

                        $("#inventory").val(data.data.inventory);
                        $("#alarm").val(data.data.alarm);
                        $("#operator").val(data.data.operator);
                        $("#operations").val(data.data.operations);
                        $("#scope").val(data.data.scope);


                        form1.render();
                    }
                    else {
                        alert(data.errorDetail);
                    }
                },
                error: function (message) {
                    alert("提交数据失败！"+message);
                }
            });
        }
        return true;
    }

    function GetJsonDataS2(id) {
        var json = {
            "url": "Goods/Self",
            "parm":{"id":id}
        };
        return json;
    }

    function createTime(v){
        return new Date(v).toLocaleString()
    }
    /**重写toLocaleString方法*/
    Date.prototype.toLocaleString = function() {
        var y = this.getFullYear();
        var m = this.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = this.getDate();
        d = d<10?("0"+d):d;
        var h = this.getHours();
        h = h<10?("0"+h):h;
        var M = this.getMinutes();
        M = M<10?("0"+M):M;
        var S=this.getSeconds();
        S=S<10?("0"+S):S;
        return y+"-"+m+"-"+d+" "+h+":"+M+":"+S;}
    
</script>
</body>
</html>